<template>
    <div class="login onflex">
        <div class="bg"></div>
        <div class="bg-mark"></div>
        <div
            class="login-card onflex animate__animated"
            :class="{ animate__shakeX: ruleForm.aniOn }"
        >
            <div class="card-left">
                <iframe
                    src="https://dailycssdesign.com/days/61/"
                    frameborder="0"
                    class="main-frame animate__animated animate__fadeInUp"
                ></iframe>
            </div>
            <div class="card-right">
                <h2>登 录</h2>
                <p>请登录以继续</p>
                <div class="login-from">
                    <el-form
                        :label-position="labelPosition"
                        :model="ruleForm"
                        :rules="rules"
                        status-icon
                        ref="ruleForm"
                        label-width="100px"
                        class="demo-ruleForm"
                        @keyup.enter.native="submitForm('ruleForm')"
                    >
                        <el-form-item prop="userName" :error="resForm.userName">
                            <el-input
                                type="text"
                                v-model="ruleForm.userName"
                                autocomplete="off"
                                placeholder="用户名"
                                error="resForm.userName"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="pass" :error="resForm.pass">
                            <el-input
                                type="password"
                                v-model="ruleForm.pass"
                                autocomplete="off"
                                placeholder="密码"
                                error="resForm.pass"
                            ></el-input>
                        </el-form-item>
                        <div class="ver-code-box onflex">
                            <el-form-item prop="inpCode">
                                <el-input
                                    type="text"
                                    v-model="ruleForm.inpCode"
                                    maxlength="5"
                                    autocomplete="off"
                                    placeholder="验证码"
                                ></el-input>
                            </el-form-item>
                            <div class="ver-code-auto">
                                <p>{{ ruleForm.verCode }}</p>
                            </div>
                        </div>

                        <el-form-item>
                            <el-button
                                type="primary"
                                
                                @click="submitForm('ruleForm')"
                                >登 录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>Copyright © 2021 健身房管理系统, All Rights Reserved.</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        var validateCode = (rule, value, callback) => {
            if (!value) {
                callback(new Error("验证码不能为空"));
                this.randomCode(5);
                this.ruleForm.aniOn = true;
                setTimeout(() => {
                    this.ruleForm.aniOn = false;
                }, 1000);
            }
            setTimeout(() => {
                console.log(this.ruleForm.verCode);
                if (
                    this.ruleForm.verCode !== this.ruleForm.inpCode &&
                    this.ruleForm.lowCode !== this.ruleForm.inpCode
                ) {
                    callback(new Error("验证码输入有误"));
                    this.randomCode(5);
                    this.ruleForm.aniOn = true;
                    setTimeout(() => {
                        this.ruleForm.aniOn = false;
                    }, 1000);
                } else {
                    callback();
                }
            }, 300);
        };
        var validateUserName = (rule, value, callback) => {
            if (value === "") {
                // console.log(this.$refs.ruleForm.validateField);
                callback(new Error("请输入用户名"));
                this.ruleForm.aniOn = true;
                setTimeout(() => {
                    this.ruleForm.aniOn = false;
                }, 1000);
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
                this.ruleForm.aniOn = true;
                setTimeout(() => {
                    this.ruleForm.aniOn = false;
                }, 1000);
            } else {
                callback();
            }
        };
        return {
            labelPosition: "top",
            ruleForm: {
                userName: "",
                pass: "",
                //随机验证码
                verCode: "",
                lowCode: "",
                //输入验证码
                inpCode: "",
                //错误抖动
                aniOn: false,
            },
            rules: {
                userName: [{ validator: validateUserName, trigger: "blur" }],
                pass: [{ validator: validatePass, trigger: "blur" }],
                inpCode: [{ validator: validateCode, trigger: "blur" }],
            },
            resForm: {
                userName: "",
                pass: "",
            },
        };
    },
    methods: {
        //随机码
        randomCode(e) {
            e = e || 32;
            var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz1234567890",
                a = t.length,
                n = "";
            for (var i = 0; i < e; i++)
                n += t.charAt(Math.floor(Math.random() * a));
            this.ruleForm.verCode = n;
            this.ruleForm.lowCode = n.toLowerCase();
            console.log(this.ruleForm.verCode, this.ruleForm.lowCode);
        },
        submitForm(formName) {
            console.log(this.$refs[formName]);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log(this.ruleForm.userName);
                    // console.log(this.ruleForm.pass);
                    this.resForm.userName = "";
                    this.resForm.pass = "";
                    this.$axios({
                        url: "/gym/member/login",
                        method: "post",
                        data: {
                            number: this.ruleForm.userName,
                            loginPwd: this.ruleForm.pass,
                        },
                    }).then((res) => {
                        console.log(res);
                        if (res.data.code != 200) {
                            this.resetForm(formName);
                            this.resForm.userName =
                                "账号或密码错误，请重新输入！";
                            this.resForm.pass = " ";
                            this.randomCode(5);
                            this.ruleForm.aniOn = true;
                            setTimeout(() => {
                                this.ruleForm.aniOn = false;
                            }, 1000);
                            console.log(this.resForm.userName);
                        } else {
                            console.log(res.data.data.member.name);
                            sessionStorage.setItem('token',res.data.data.token);
                            let user={};
                            user.number = this.ruleForm.userName;
                            user.name = res.data.data.member.name
                            
                            sessionStorage.setItem('user',JSON.stringify(user));
                            // this.$store.commit("setToken", res.data.data);
                            // this.$store.commit(
                            //     "setUser",
                            //     this.ruleForm.userName
                            // );
                            this.$router.push("/home");
                            this.$message({
                                message: "恭喜你，登录成功啦！",
                                type: "success",
                            });
                        }
                    });
                    // alert("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted() {
        this.randomCode(5);
        console.log(this.$refs);
    },
};
</script>

<style lang="less" scoped>
.bg {
    background: url("../assets/imgaes/login_BG.jpg") no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.bg-mark {
    background-color: #000000c4;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
iframe {
    width: 100%;
    height: 100%;
}
.login {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.login-card {
    width: 900px;
    height: 500px;
    border: 3px solid #2e2e2e;
    border-radius: 10px;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0px 50px 500px #ffffff27;
    text-align: left;
    z-index: 2;
}
.card-left {
    height: 100%;
    flex-grow: 5;
    background-color: #141414;
}
.card-right {
    height: 100%;
    padding: 50px;
    padding-right: 10px;
    background-color: #0e0e0e;
    color: #d8d8d8de;
    flex-grow: 1;
    h2 {
        font-size: 35px;
    }
    p {
        margin-top: 10px;
        font-size: 15px;
        color: #adadadde;
    }

    /deep/ .el-input__inner {
        background-color: #00000000;
        border: 1px solid #dcdfe63b;
        color: #e7e7e7;
    }
    /deep/ .el-input__inner::-webkit-input-placeholder {
        color: #ffffff3f;
    }
    .el-button {
        width: 100%;
    }
}
.login-from {
    margin-top: 50px;
    width: 300px;
}
.ver-code-box {
    .ver-code-auto {
        border: 1px solid #dcdfe63b;
        color: #e7e7e7;
        height: 38px;
        margin-left: 10px;
        border-radius: 5px;
        flex-grow: 1;
        padding: 0 15px 0 15px;
        p {
            font-size: 20px;
        }
    }
}
.footer {
    color: rgba(173, 173, 173, 0.493);
    position: absolute;
    bottom: 20px;
    left: 50%;
    font-size: 15px;
    transform: translateX(-50%);
}
</style>